<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementui共公列表</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

    <style type="text/css">
        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        button{
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/
    </style>

</head>
<body>
    <div id="app">
        <div id="topdiv" class="demoTable" style="padding: 5px;">
            <div class="layui-inline" v-for="(item,index) in listSearch" style="margin: 3px 0px;">
                <label class="layui-form-label" >{{item.lable}}：</label>

                <div class="layui-input-inline" v-if="item.type == '0'" >
                    <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
                </div>

                <div class="layui-input-inline" v-if="item.type == '1' && item.searchTypeForDateDto.startShow" >
                    <input class="layui-input"   t=date v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :id="item.key+'date-start'" :name="item.key"  autocomplete="off">
                </div>

                <div class="layui-input-inline" v-if="item.type == '1' && item.searchTypeForDateDto.endShow" >
                    <input class="layui-input"  t=date v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :id="item.key+'date-end'" :name="item.key"  autocomplete="off">
                </div>

                <div class="layui-input-inline" v-if="item.type == '5' && item.searchTypeForDateDto.startShow" >
                    <input class="layui-input"  t=datetime v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :id="item.key+'date-start'" :name="item.key"  autocomplete="off">
                </div>
                <div class="layui-input-inline" v-if="item.type == '5' && item.searchTypeForDateDto.endShow" >
                    <input class="layui-input"   t=datetime v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :id="item.key+'date-end'" :name="item.key"  autocomplete="off">
                </div>

                <div class="layui-input-inline" v-if="item.type == '6' && item.selectoptions == 0"  >
                    <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
                </div>
                <div class="layui-input-inline" v-if="item.type == '8' && item.selectoptions == 0"  >
                    <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
                </div>

                <div class="layui-input-inline" v-if="item.type == '6' && item.selectoptions != 0"  >
                    <select :name="item.key"  v-model="searchInputDtos[item.key].value"  class="layui-input" style="display: block;width: 160px;" >
                        <option></option>
                        <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
                    </select>
                </div>

                <div class="layui-input-inline" v-if="item.type == '8' && item.selectoptions != 0" >
                    <select :name="item.key"  v-model="searchInputDtos[item.key].value"  class="layui-input"  style="display: block;width: 160px;" >
                        <option></option>
                        <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
                    </select>
                </div>

            </div>

            <template v-if="JSON.stringify(listSearch) != '{}'">
                <button class="layui-btn"  onclick="vm.getListdata()">搜索</button>
                <button class="layui-btn"  onclick="vm.f_search_advanced()">高级检索</button>
                <button class="layui-btn"  onclick="vm.f_search_custom()">自定义搜索</button>
            </template>


        </div>


        <el-row  >
<!--            <el-button type="danger" @click="printBaobiao" size="mini" >预打收据</el-button>-->
            <el-button type="primary" @click="batchjiaokuan" size="mini" >批量缴款</el-button>

        </el-row>

        <el-table
                :data="tableData"
                stripe
                :height="tableHeight"
                size="small"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column v-for="(item,index) in listColumn"
                    :prop="item.col_name"
                    :label="item.show_name"
                    :width="item.minWidth" >
            </el-table-column>

        </el-table>
    </div>
</body>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           tableId:getTableId("732"),
           listSearch: {}//默认查询的字段
           , searchInputDtos: {},
           listColumn:[],
           tableData: [],
           multipleSelection: [],
           parmsData:{},
           tableHeight:0,
           baobiaoUrl:"",
       },
       created(){
           this.parmsData = getParams();
           this.getHead();
       },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = [];
                for(let a=0;a<val.length;a++){
                    this.multipleSelection.push(val[a].id);
                }
            },
            async getHead(){
                const res = await postBody("/admin/api/DataManagementController/getCustomFields", {tableId: this.tableId});
                this.listColumn = res.data.listColumn;
                this.listSearch = res.data.listSearch;
                this.searchInputDtos = res.data.listSearch;

                //头部渲染完成后，开始设置表格的高度
                vm.$nextTick(function (){
                    //设置表格的高度
                    vm.tableHeight = parseInt(document.documentElement.scrollHeight)-$("#topdiv").height()-200;
                });


                //加载数据
                this.getListdata();
                this.loadDateInput();
            },
            //批量缴款
            async batchjiaokuan(){
                if(this.multipleSelection.length == 0){
                    top.alert("请勾选记录进行操作");
                    return;
                }
                let btn = {
                    btn: ['确定', '取消']
                    , yes: async function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);

                        let data = win.getData();
                        let i = top.load();
                        const res = await postWebCustom(getTableId("781"),{"ids":""+vm.multipleSelection,"text":JSON.stringify(data)});
                        top.layer.close(i);
                        if(res.code == 1){
                            top.layer.closeAll();
                            vm.batjiaokaunprintBaobiao(res.data);
                            top.alert(res.msg);
                            vm.getListdata();
                        }
                        top.alert(res.msg);
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };


                top.data.zygl_id = getTableId("2507");
                top.data.tableId = getTableId("2507");
                load();
                // const resq = await postWebCustom(getTableId("780"),{"ids":""+this.multipleSelection});
                const resq = await queryDataForId(getTableId("2507"),""+this.multipleSelection);
                layer.closeAll();
                if(resq.code == 0){
                    top.alert(resq.msg);
                    return;
                }
                let inputurl = "/admin/html/inputCustom/index.html";
                top.f_layer_open_get(inputurl, "80%", "50%", function () {

                }, btn, "批量缴款", resq.data);
            },
            //打开打印缴款收款凭证
            batjiaokaunprintBaobiao(jkbh){
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                let inputurl = "/admin/html/module/sichuangwuye/hesuan/batupprintBaobiaoReli.html?id="+jkbh;
                let keycode = getTableId("0").split("-")[0];
                if(keycode != 'yangguangreli'){
                    inputurl = "/admin/html/module/sichuangwuye/hesuan/printBaobiao.html?id="+jkbh;
                }
                top.f_layer_open_get(inputurl, "80%", "60%", function () {

                }, btn, "收款凭证", {});
            },
            //打开打印收款凭证
            async printBaobiao(jkbh){
                if(this.multipleSelection.length == 0){
                    top.alert("请勾选记录进行操作");
                    return;
                }
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                load();
                const res = await postWebCustom(getTableId("776"),{type:this.parmsData.type,id:this.parmsData.id,ids:""+this.multipleSelection});
                layer.closeAll();
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                let inputurl = "/admin/html/module/sichuangwuye/hesuan/printBatchBaobiao.html";
                top.f_layer_open_get(inputurl, "80%", "60%", function () {

                }, btn, "预打收据",res.data);
            },
            async getListdata(){
                load();
                const res = await postWebCustom(getTableId("775"),{type:this.parmsData.type,id:this.parmsData.id,searchInputDtos:JSON.stringify(this.searchInputDtos)});
                this.tableData = res.data.rows;
                this.baobiaoUrl = res.data.routing;
                layer.closeAll();
            },
            f_search_advanced() {
                let btn = {
                    btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);
                        let data = win.getData();
                        vm.searchInputDtos = data;
                        vm.getListdata();
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.zygl_id = vm.tableId;
                top.f_layer_open_get("/admin/html/dataManagement/advancedRetrieval.html", "40%", "60%", function () {

                }, btn, "高级检索")
            },
            f_search_custom() {
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.custom = "IS_SEARCH";
                top.data.zygl_id = vm.tableId;
                top.f_layer_open_get("/admin/html/dataManagement/custom_search.html", "80%", "65%", function () {

                }, btn, "自定义搜索")
            },
            loadDateInput(){
                layui.use(['table', 'jquery', 'laydate'],function (){
                    var laydate = layui.laydate;
                    //初始化日期框
                    vm.$nextTick(function () {
                        $("[t=date]").each(function (index, element) {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");
                            let dt = "start";
                            if (id.endsWith("end")) {
                                dt = "end";
                            }
                            //日期常规用法
                            laydate.render({
                                elem: '#' + id,
                                done: function (value, date, endDate) {
                                    vm.searchInputDtos[name].searchTypeForDateDto[dt] = value;//设置vue数据对象的值
                                }
                            });
                        });

                        $("[t=datetime]").each(function (index, element) {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");
                            let dt = "start";
                            if (id.endsWith("end")) {
                                dt = "end";
                            }
                            laydate.render({
                                elem: '#' + id,
                                type: 'datetime',
                                done: function (value, date, endDate) {
                                    vm.searchInputDtos[name].searchTypeForDateDto["end"] = value;//设置vue数据对象的值
                                }
                            });
                        });
                    })
                });

            }
        }
    });
</script>
</html>